@import "~taro-ui/dist/style/components/flex.scss";

page {
    background: white;
    // background: red;
}

.adult-place-detail-page {
    text-align: center;

    .top-banner {
        image {
            width: 100%;
            vertical-align: middle;
        }
    }

    .content-wrap {
        margin: 0px 20px;
        margin-top: 20px;
        padding: 12px 22px 32px 22px;
        background: white;
        border-radius: 12px;

        .content-title-wrap {
            position: relative;
            text-align: left;
            margin-bottom: 30px;
            // padding: 0px 10px;
            padding-top: 22px;

            .title {
                font-size: 32px;
                // margin-left: 28px;
                color: #1D1D1E;
                font-weight: bold;

                &-desc {
                    font-weight: initial;
                    font-size: 24px;
                    color: #999;
                    margin-left: 20px;
                }
            }

            .more {
                font-size: 21px;
                color: #999;
                position: absolute;
                right: 10px;
            }

            .more-dynamic {
                font-size: 23px;
                color: #999;
                position: absolute;
                right: 10px;
                top: 30px;
            }
        }
        
        .content {
            padding: 30px;
            text-align: left;
            line-height: 48px;
        }

        .lf-wrap {
            display: flex;
            flex-direction: column;
            width: 100%;
            line-height: 70px;
            // max-height: 200px;
            // padding-top: 20px;
            &-detail-top {
                width: 100%;
                text-align: left;
                font-size: 32px;
                color: #333;
                image {
                    width: 100%;
                }
            }
            &-detail-bottom {
                line-height: 40px;
                flex: 1;
                text-align: left;
                .name {
                    color: #333;
                    font-size: 32px;
                    font-weight: bold;
                    position: relative;
                    .text-price {
                        color: #FF0000;
                        font-size: 32px;
                        font-weight: bold;
                        position: absolute;
                        display: inline-block;
                        right: 0px;
                        top: 0px;
                        
                        image {
                            width:24px;
                            height:24px;
                            margin-left: 10px;
                        }
                        .price-symbol {
                            font-size: 20px;
                        }
                        .goods-nums {
                            color: #979797;
                            font-size: 30px;
                            display: inline-block;
                            margin-left: 34px;
                            font-weight: 300;
                            position: absolute;
                            right: 10px;
                        }
                        .un-price {
                            display: inline-block;
                            font-size: 24px;
                            color: #999;
                            text-decoration: line-through;
                            margin-left: 10px;
                            font-weight: initial;
                        }
                    }
                }
                .desc {
                    text-align: left;
                    margin-top: 20px;
                    overflow: hidden;
                    color: #999;
                    font-size: 24px;
                }
                .book-fields {
                    margin-top: 30px;
                    .book-field {
                        position: relative;
                        margin-top: 8px;
                        font-size: 24px;
                        .field-name {
                            // width: 100px;
                            color: #5E5D5D;
                            // display: inline-block;
                        }
                        .field-value {
                            color: #999999;
                        }
                        .field-rate {
                            position: relative;
                            top: -14px;
                            display: inline-block;
                        }
                    }
                }
            }
        }

        .lf-lr-wrap {
            display: flex;
            flex-direction: row;
            width: 100%;
            line-height: 70px;
            // max-height: 200px;
            padding-top: 20px;
            position: relative;

            &-left {
                width: 210px;
                text-align: left;
                font-size: 32px;
                color: #333;
                image {
                    width: 100%;
                    max-height: 210px;
                }
            }
            &-right {
                padding-left: 20px;
                line-height: 40px;
                flex: 1;
                text-align: left;
                .name {
                    font-size: 32px;
                    font-weight: bold;
                }
                .tags {
                    text-align: left;
                    margin-top: 10px;
                    overflow: hidden;
                    .tag {
                    display: inline-block;
                    background: #F3F4F5;
                    padding: 0px 16px;
                    border-radius: 8px;
                    font-size: 20px;
                    color: #FF6632;
                    &:nth-child(n+2) {
                        margin-left: 10px;
                    }
                    }
                    .green {
                        color: #06CC94;
                    }
                    .black {
                        color: #4A4A4A;
                    }
                    .orange {
                        color: #FF6632;
                    }
                }
                .text-price {
                    color: #FF0000;
                    font-size: 32px;
                    font-weight: bold;
                    margin-top: 12px;
                    position: relative;
                    image {
                        width:24px;
                        height:24px;
                        margin-left: 10px;
                    }
                    .price-symbol {
                        font-size: 20px;
                    }
                    .goods-nums {
                        color: #979797;
                        font-size: 30px;
                        display: inline-block;
                        margin-left: 34px;
                        font-weight: 300;
                        position: absolute;
                        right: 10px;
                    }
                    .un-price {
                        display: inline-block;
                        font-size: 24px;
                        color: #999;
                        text-decoration: line-through;
                        margin-left: 10px;
                        font-weight: initial;
                    }
                }
                .btns {
                    position: relative;
                    right: 0px;
                    bottom: 0px;
                    text-align: right;
                    font-size: 24px;
                    .btn {
                        display: inline-block;
                        padding: 4px 22px;
                        background: #52D5AA;
                        border-radius: 50px;
                        color: white;
                    }
                }
            }
        }
    }

    .block-title {
        color: #333;
        font-size: 32px;
        font-weight: bold;
        // position: relative;
        text-align: left;
        padding-left: 22px;
    }

    .block-wrap {
        // margin: 0px 20px;
        margin-top: 20px;
        padding: 12px 22px 32px 22px;
        background: white;
        border-radius: 12px;
        text-align: left;

        .plan-list {
            // padding: 20px;
            box-sizing: border-box;
            white-space: nowrap;
            .plan-item {
                padding: 25px 40px;
                text-align: center;
                position: relative;
                display: inline-block;
                border: 2px solid #979797;
                border-radius: 8px;
                margin-right: 20px;
                background: white;
                &:nth-last-child(1) {
                    margin-right: 0px;
                }
                .name {
                    color: #5E5D5D;
                    font-size: 24px;
                    font-weight: bold;
                }
                .desc {
                    color: #999;
                    font-size: 22px;
                    margin-top: 10px;
                    height: 30px;
                }
                .tip {
                    font-size: 29px;
                    margin-top: 10px;
                    &.red {
                        color: #FF0000;
                    }
                    &.green {
                        color: #00DEA4;
                    }
                }
            }
        }
    }

    .lr-content-wrap {
        margin-left: 0px;
        margin-right: 0px;
        border-radius: 0px;
    }
    
    .detail-content-wrap {
        margin-top: 0px;
        margin-left: 0px;
        margin-right: 0px;
        border-radius: 0px;
        padding: 0px 0px 32px 0px;
        .lf-wrap-detail-bottom {
            padding: 20px 22px 0px 22px;
        }
    }
}
